<template>
    <div class="inputbox">
        <span @click="toAddpage">新增</span>
        <input type="text" placeholder="输入任务名称" v-model="inputText">
    </div>
    <div class="summary">
        <span>全部任务{{store.tasklist.length}}</span>
        <span>已完成{{store.tasklist.length-store.unFinishedCount}}</span>
        <span class="unfinished">未完成{{store.unFinishedCount}}</span>
    </div>
    <div class="tasklist">
        <div :class="{ task: true, unfinished: !item.status }" v-for="(item, index) in store.tasklist" :key="index">
            <input :checked="item.status" type="checkbox" @click="change(item.id)">
            <span> {{ item.name }} </span>
            <span @click="del(item.id)">删除</span>
        </div>
    </div>
</template>

<script setup>
import { useTasklistStore } from '../stores/tasklist'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 调用useTasklistStore方法，获取store对象
var store = useTasklistStore()
var $router = useRouter()
var inputText = ref('')
var { tasklist, changeStatus, deleteTask } = ref([])


var change = (id) => {
    store.changeStatus(id)
}
var del = (id) => {
    store.deleteTask(id)
}

var toAddpage = ()=>{
    $router.push('/addpage');//调用push函数 跳路由
  }
</script>
<style scoped>
.inputbox {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding: 10px;
}

.inputbox span{
    width: 80px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    color: cornflowerblue;
    border: 1px solid blue;
    margin-bottom: 5px;
}
.inputbox input {
    line-height: 40px;
    flex: 1;
    outline: none;
    border: 1px solid lightgrey;
    padding-left: 10px;

}
.summary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.summary span{
    line-height: 40px;
    border-radius: 5px;
    padding: 0 20px;
    text-align: center;
    color: white;
    background-color: cornflowerblue;
}
.summary .unfinished{
    background-color: orangered;
}
.tasklist .task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: rgb(33, 146, 216);
    color: white;
    margin: 10px;
}

.tasklist .task.unfinished {
    background-color: red;
}
</style>